<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="click" id="btn">

    <script src="../tools.js"></script>
    <script>
        class Circle {
            constructor(r, color, x, y) {
                this.r = r;
                this.color = color;
                this.x = x;
                this.y = y;
                this.node = null;
            }
            render() {
                // 添加进 body 
                this.node = document.createElement('div');
                this.node.style.cssText = `
                    width: ${this.r * 2}px;
                    height: ${this.r * 2}px;
                    background-color: ${this.color};
                    position: absolute;
                    left: ${this.x}px;
                    top: ${this.y}px;
                    border-radius: 50%;
                `;
                document.body.appendChild(this.node);
            }
        }
        btn.onclick = function () {
            let r = random(20, 50),
                color = `rgb(${random(255)},${random(255)},${random(255)})`,
                x = random(innerWidth),
                y = random(innerHeight);
            let obj = new Circle(r, color, x, y); // 实例
            obj.render();
        }



    </script>
</body>

</html>